<script setup>
import { Delete } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { eventsDeleteService, eventsGetListService } from '@/api/events'
import { useRouter } from 'vue-router'

const router = useRouter()

const eventsList = ref([])

const getEventsList = async () => {
  const res = await eventsGetListService()
  eventsList.value = res.data.data
}
getEventsList()

// 删除事件
const onDeleteEvents = async (type, name) => {
  await ElMessageBox.confirm('你确定要删除该事件么', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  })
  await eventsDeleteService(type, name)
  getEventsList()
} 


</script>

<template>
  <el-container>
    <el-header
      style="
        border: 1px solid rgb(229, 229, 229);
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
      "
    >
      <el-button
        @click="$router.push('/events/create')"
        type="default"
        color="black"
        size="large"
        auto-insert-space
      >
        创建事件
      </el-button>
    </el-header>
    <el-main style="border: 1px solid rgb(229, 229, 229)">
      <el-table :data="eventsList" highlight-current-row="true" row-style="cursor: pointer" v-loading="loading">
        <el-table-column label="服务">
          <template #default="scoped">
            {{ scoped.row.type }}:{{ scoped.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scoped">
            <div style="display: flex; align-items: center;">
              <el-icon v-if="scoped.row.alive">
                <svg t="1733842668967" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17959" width="200" height="200"><path d="M512 0A512 512 0 1 1 0 512 512 512 0 0 1 512 0z m313.7536 729.216l-96.5376 96.5376L512 608.5376l-217.216 217.216-96.5632-96.5376L415.4624 512l-217.2416-217.216 96.5632-96.5632L512 415.4624l217.216-217.2416 96.5376 96.5632L608.5376 512z" fill="#1afa29" p-id="17960"></path></svg>
              </el-icon>
              <el-icon v-else>
                <svg t="1733842668967" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17959" width="200" height="200"><path d="M512 0A512 512 0 1 1 0 512 512 512 0 0 1 512 0z m313.7536 729.216l-96.5376 96.5376L512 608.5376l-217.216 217.216-96.5632-96.5376L415.4624 512l-217.2416-217.216 96.5632-96.5632L512 415.4624l217.216-217.2416 96.5376 96.5632L608.5376 512z" fill="#FF0000" p-id="17960"></path></svg>
              </el-icon>
            </div>            
          </template>
        </el-table-column>
        <el-table-column>
          <template #default="scope">
            <div style="display: flex; justify-content: flex-end; align-items: center;">
              <el-icon size="20" @click.stop="onDeleteEvents(scope.row.type, scope.row.name)"><Delete /></el-icon>
            </div>
          </template>
        </el-table-column>

        <template #empty>
          <el-empty description="没有事件"></el-empty>
        </template>
      </el-table>
    </el-main>
  </el-container>
</template>

<style scoped></style>
